<style lang="scss" scoped>

    $bg_color:#182531;

    .user-info{
      width:240px;
      height: auto;
      float: left;
      background:$bg_color;
    }

    .left-ctn{
      width:140px;
      height:140px;
      display: block;
      float: left;
      text-align: center;
    }

    .user-image{
      width:80px;
      height: 80px;
      margin:30px auto;
      border-radius: 50%;
    }

    .user-status{
      position: absolute;
      left:80px;
      top:80px;
      width:30px;
      height: 30px;
      background-image: url("../../assets/images/ok.png");
      background-size:cover;
    }

    .fontSize{
      color: white;
      font-family: '微软雅黑';
      font-size: 16px;
      display: block;
      height: 30px;
      line-height: 30px;
    }

    .user-name{
      @extend .fontSize;
      margin-top: 30px;
    }

    .user-position{
      @extend .fontSize;
      font-size: 14px;
      margin-top: 15px;
    }

    .right-ctn{
      width:100px;
      height:140px;
      display: block;
      float: left;
      text-align: center;
    }

</style>
<template>
      <div class="user-info">
          <div class="left-ctn">
            <img class="user-image" :src="this.imgUrl" alt="" />
            <span class="user-status"></span>
          </div>
          <div class="right-ctn">
            <span class="user-name">梁静茹</span>
            <span class="user-position">项目总工程师</span>
          </div>
      </div>
</template>
<script>
  export default {
    name:"userInfo",
    data() {
      return {};
    },
    props:{
      imgUrl:{
        type:String,
        default:"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80",
        required:false
      },
      position:{
        type:String,
        default:"业务代表",
        required:false
      },
      username:{
        type:String,
        default:"匿名",
        required:false
      }
    }
  }
</script>
